/* 标题栏组件 - HarmonyOS设计指南实现 */

@import '../base/window.less';
@import '../base/color.less';
@import '../base/font.less';

/* 尺寸变量 */
:root {
  --titlebar-height: calc(56 * var(--unit));
  --titlebar-height-large: calc(112 * var(--unit));
  --titlebar-padding-x: calc(16 * var(--unit));
  --titlebar-padding-y: calc(12 * var(--unit));
  --titlebar-icon-size: calc(20 * var(--unit));
  --titlebar-button-size: calc(40 * var(--unit));
  --titlebar-button-spacing: calc(12 * var(--unit));
}

/* 动效变量 */
:root {
  --titlebar-transition-duration: 0.3s;
  --titlebar-blur-radius: calc(10 * var(--unit));
}

/* 基础标题栏容器 */
.titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--titlebar-height);
  background-color: var(--color-comp-background-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--titlebar-padding-x);
  box-shadow: 0 1px 2px var(--color-comp-divider);
  z-index: 200;
  transition: all var(--titlebar-transition-duration) ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  /* 安全区域适配 */
  padding-top: env(safe-area-inset-top, 0);

  /* 左侧区域 */
  .titlebar-left {
    display: flex;
    align-items: center;
    gap: var(--titlebar-button-spacing);
  }

  /* 中间区域 */
  .titlebar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* 右侧区域 */
  .titlebar-right {
    display: flex;
    align-items: center;
    gap: var(--titlebar-button-spacing);
  }

  /* 标题样式 */
  .titlebar-title {
    font-size: var(--font-size-title-medium);
    font-weight: var(--font-weight-title);
    color: var(--color-font-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  /* 副标题样式 */
  .titlebar-subtitle {
    font-size: var(--font-size-title-sub-small);
    font-weight: var(--font-weight-sub-title);
    color: var(--color-font-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  /* 按钮样式 */
  .titlebar-button {
    width: var(--titlebar-button-size);
    height: var(--titlebar-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--titlebar-transition-duration) ease;
    color: var(--color-icon-primary);

    &:hover {
      background-color: var(--color-interactive-hover);
    }

    &:active {
      background-color: var(--color-interactive-pressed);
      transform: scale(0.95);
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover,
      &:active {
        background-color: transparent;
        transform: none;
      }
    }
  }

  /* 图标样式 */
  .titlebar-icon {
    width: var(--titlebar-icon-size);
    height: var(--titlebar-icon-size);
    fill: currentColor;
  }

  /* 文本按钮样式 */
  .titlebar-text-button {
    font-size: var(--font-size-body-medium);
    color: var(--color-font-emphasize);
    font-weight: var(--font-weight-medium);
    padding: calc(4 * var(--unit)) calc(12 * var(--unit));
    cursor: pointer;
    transition: all var(--titlebar-transition-duration) ease;

    &:hover {
      background-color: var(--color-interactive-hover);
      border-radius: calc(4 * var(--unit));
    }

    &:active {
      background-color: var(--color-interactive-pressed);
    }

    &.disabled {
      color: var(--color-font-fourth);
      cursor: not-allowed;

      &:hover,
      &:active {
        background-color: transparent;
      }
    }
  }

  /* 隐藏元素 */
  &.hide-back {
    .titlebar-left .back-button {
      display: none;
    }
  }

  &.hide-title {
    .titlebar-center {
      display: none;
    }
  }

  /* 模糊背景效果 - 通用模糊 */
  &.blur-enabled {
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(var(--titlebar-blur-radius));
    backdrop-filter: blur(var(--titlebar-blur-radius));

    /* 模糊边界线 */
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--color-comp-divider);
    }
  }

  /* 渐变模糊效果 */
  &.gradient-blur {
    background-color: transparent;
    -webkit-backdrop-filter: blur(var(--titlebar-blur-radius));
    backdrop-filter: blur(var(--titlebar-blur-radius));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));

    /* 无边界线 */
    &::after {
      display: none;
    }
  }

  /* 深色模式适配 */
  @media (prefers-color-scheme: dark) {
    background-color: var(--color-background-secondary);

    &.blur-enabled {
      background-color: rgba(0, 0, 0, 0.7);
    }

    &.gradient-blur {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    }
  }
}

/* 强调型标题栏 */
.titlebar.emphasis {
  height: var(--titlebar-height-large);
  padding: calc(16 * var(--unit)) var(--titlebar-padding-x);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;

  .titlebar-center {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    padding-bottom: calc(12 * var(--unit));
  }

  .titlebar-left {
    order: 1;
  }

  .titlebar-right {
    order: 2;
    position: absolute;
    top: calc(16 * var(--unit));
    right: var(--titlebar-padding-x);
  }

  .titlebar-title {
    font-size: var(--font-size-title-large);
    line-height: 1.2;
  }

  .titlebar-subtitle {
    margin-top: calc(4 * var(--unit));
    font-size: var(--font-size-title-sub-medium);
  }
}

/* 普通型标题栏 */
.titlebar.normal {
  height: var(--titlebar-height);

  .titlebar-title {
    font-size: var(--font-size-title-medium);
  }
}

/* 抽屉型标题栏 */
.titlebar.drawer {
  .titlebar-left {
    .drawer-button {
      display: flex;
    }
  }

  /* 平板端分栏布局适配 */
  @media (min-width: @breakpoint-medium) {
    padding-left: calc(280 * var(--unit)); /* 抽屉宽度 */
  }
}

/* 二级页标题栏 */
.titlebar.secondary {
  .titlebar-left {
    min-width: var(--titlebar-button-size);
  }

  .back-button {
    display: flex;
  }
}

/* 编辑界面标题栏 */
.titlebar.edit {
  .titlebar-left {
    .titlebar-text-button {
      color: var(--color-font-secondary);
    }
  }

  .titlebar-right {
    .titlebar-text-button {
      color: var(--color-font-emphasize);
    }
  }
}

/* 半模态标题栏 */
.titlebar.semi-modal {
  background-color: transparent;
  -webkit-backdrop-filter: blur(var(--titlebar-blur-radius));
  backdrop-filter: blur(var(--titlebar-blur-radius));
  box-shadow: none;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-comp-divider);
  }

  @media (prefers-color-scheme: dark) {
    &::before {
      background-color: rgba(0, 0, 0, 0.7);
    }
  }
}

/* 全屏标题栏 */
.titlebar.fullscreen {
  position: absolute;
  background-color: transparent;
  box-shadow: none;
  color: white;

  .titlebar-title,
  .titlebar-subtitle {
    color: white;
  }

  .titlebar-button,
  .titlebar-text-button {
    color: white;
  }

  &::after {
    display: none;
  }
}

/* 响应式适配 */
@import '../base/window.less';

@media (max-width: @breakpoint-small) {
  .titlebar {
    --titlebar-padding-x: calc(12 * var(--unit));
    --titlebar-button-spacing: calc(8 * var(--unit));
  }

  .titlebar-title {
    font-size: var(--font-size-title-sub-large) !important;
  }

  .titlebar.emphasis {
    height: calc(88 * var(--unit));
    padding: calc(12 * var(--unit)) var(--titlebar-padding-x);

    .titlebar-title {
      font-size: var(--font-size-title-medium) !important;
    }

    .titlebar-subtitle {
      font-size: var(--font-size-title-sub-small) !important;
    }
  }

  /* 小屏幕隐藏次要元素 */
  .titlebar-right .titlebar-button:not(:first-child) {
    display: none;
  }
}

/* 内容区域需要留出标题栏高度的边距 */
.content-with-titlebar {
  padding-top: var(--titlebar-height);
}

.content-with-titlebar-large {
  padding-top: var(--titlebar-height-large);
}

/* 动态高度标题栏 - 用于Free样式 */
.titlebar.dynamic {
  height: auto;
  transition: all 0.3s ease;
  overflow: hidden;

  &.collapsed {
    height: var(--titlebar-height);
    padding: 0 var(--titlebar-padding-x);

    .titlebar-subtitle {
      display: none;
    }

    .titlebar-center {
      padding-bottom: 0;
    }
  }
}